<template>
  <main class="no-goods">
    <el-dialog v-model:dialogVisible="dialogVisible" @close="dialogClose" :width="600" v-model="dialogVisible" draggable title="新建商品">
      <el-form :model="form">
        <el-form-item label="商品类型：" :label-width="formLabelWidth">
          <el-radio-group v-model="form.type" style="margin-bottom: 5px">
            <el-radio :label="1" size="large">课程产品</el-radio>
            <el-radio :label="4" size="large">服务费</el-radio>
          </el-radio-group>
        </el-form-item>
        <section v-if="form.type === 4">
          <el-form-item label="商品名称：" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="定价：" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off" placeholder="请输入金额" />
          </el-form-item>
          <el-form-item label="是否上架：" :label-width="formLabelWidth">
            <el-switch v-model="form.isSell" size="large" />
          </el-form-item>
        </section>
        <section v-if="form.type === 1">
          <el-form-item label="商品名称：" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="课程类型：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.lessonType" style="margin-bottom: 5px">
              <el-radio :label="1" size="large">1 v 1</el-radio>
              <el-radio :label="2" size="large">1 v N</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="课程形式：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.lessonForm" style="margin-bottom: 5px">
              <el-radio :label="1" size="large">线上</el-radio>
              <el-radio :label="2" size="large">线下</el-radio>
              <el-radio :label="3" size="large">OMO</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="定价：" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off" placeholder="请输入金额" />
          </el-form-item>
          <el-form-item label="付款方式：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.payType" style="margin-bottom: 5px">
              <el-radio :label="1" size="large">预充值</el-radio>
              <el-radio :label="2" size="large">后置结算</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适用年级：" v-model="form.grade" :label-width="formLabelWidth">
            <el-cascader :options="options" :show-all-levels="false" />
          </el-form-item>
        </section>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmAdd">确定</el-button>
          <el-button type="primary" @click="cancelDel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </main>
</template>

<script lang="ts" setup>
import { reactive, defineProps, toRefs, defineEmits } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
const formLabelWidth = "160px";
const options = [
  {
    value: "小学",
    label: "小学",
    children: [
      {
        value: "一年级",
        label: "一年级"
      },
      {
        value: "二年级",
        label: "二年级"
      },
      {
        value: "三年级",
        label: "三年级"
      },
      {
        value: "四年级",
        label: "四年级"
      },
      {
        value: "五年级",
        label: "五年级"
      },
      {
        value: "六年级",
        label: "六年级"
      }
    ]
  },
  {
    value: "初中",
    label: "初中",
    children: [
      {
        value: "初一",
        label: "初一"
      },
      {
        value: "初二",
        label: "初二"
      },
      {
        value: "初三",
        label: "初三"
      }
    ]
  },
  {
    value: "高中",
    label: "高中",
    children: [
      {
        value: "高一",
        label: "高一"
      },
      {
        value: "高二",
        label: "高二"
      },
      {
        value: "高三",
        label: "高三"
      }
    ]
  }
];
const props = defineProps({
  dialogVisible: {
    default: () => false,
    require: true
  }
});
const { dialogVisible } = toRefs(props);
const emit = defineEmits(["update:dialogVisible", "confirmHandle"]);
const form = reactive({
  // 表单数据
  title: "",
  type: 1,
  price: null,
  isSell: 1,
  lessonType: 0,
  lessonForm: 1,
  payType: 1,
  grade: "一年级"
});
const confirmAdd = () => {
  // 添加数据，确认
  console.log("确定");
  baseService.post("/product/addProduct", form).then((res) => {
    console.log(res, "测试接口");
    if (res?.code === 200) {
      ElMessage({
        message: "数据添加成功",
        type: "success"
      });
      confirmHandle(); // 告诉父组件更新表格
    } else {
      ElMessage({
        message: "数据添加失败",
        type: "warning"
      });
    }
  });
  dialogClose();
};
const confirmHandle = () => {
  emit("confirmHandle", true);
};
const cancelDel = () => {
  console.log("取消");
  dialogClose();
};
const dialogClose = () => {
  emit("update:dialogVisible", false);
};
</script>

<style lang="scss" scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
